<template>
  <div class="ebookrender-book">
    <ebook-title />
    <ebook-menu />
    <div id="book"></div>
  </div>
</template>

<script>
import params from 'js/params'
import { ebookMixin } from 'js/mixin'
import Epub from 'epubjs'
import EbookTitle from '../components/EbookTitle'
import EbookMenu from '../components/EbookMenu'
import { getFontSize, setFontSize, setFontFamily, getFontFamily, setTheme, getTheme } from 'js/storage'
import { changeFullTheme } from 'js/util'
global.ePub = Epub
export default {
  components: {
    EbookTitle,
    EbookMenu
  },
  mixins: [ebookMixin],
  methods: {
    _initEpub(fileUrl) {
      let resourseUrl = params.resourseUrl
      let fullfileName = resourseUrl + fileUrl + '.epub'
      this.book = new Epub(fullfileName)
      this.set_book_handle(this.book)
      this.rendition = this.book.renderTo('book', {
        width: window.innerWidth,
        height: window.innerHeight,
        methods: 'default'
      })
      this.rendition.display()
      this.initFontSize(fileUrl)
      this.initFontFamily(fileUrl)
      this.initTheme(fileUrl)
      this.rendition.on('touchstart', (event) => {
        this.startX = event.changedTouches[0].screenX
        this.startTime = event.timeStamp
      })
      this.rendition.on('touchend', (event) => {
        let endX = event.changedTouches[0].screenX
        let endTime = event.timeStamp
        if (endX - this.startX > 40 && endTime - this.startTime < 500) {
          this.prev()
        } else if (endX - this.startX < -40 && endTime - this.startTime < 500) {
          this.next()
        } else {
          this.showMenu()
        }
        event.stopPropagation()
      })
    },
    initTheme(fileName) {
      // 获取本地缓存中的主题
      let theme = getTheme(fileName)
      this.themeList = params.themeList(this)
      if (!theme) {
        theme = this.themeList[0].name
        setTheme(fileName, theme)
      }
      // 修改vuex中的默认值
      this.set_default_theme(theme)
      // epub注册主题
      this.themeList.forEach(theme => {
        this.rendition.themes.register(theme.name, theme.style)
      })
      changeFullTheme(theme)
      this.rendition.themes.select(theme)
    },
    initFontSize(fileName) {
      let font = getFontSize(fileName)
      if (font) {
        this.rendition.themes.fontSize(font + 'px')
        this.set_default_fontSize(font)
      } else {
        setFontSize(fileName, this.get_default_fontsize)
      }
    },
    initFontFamily(fileName) {
      let fontFamily = getFontFamily(fileName)
      if (fontFamily) {
        this.rendition.themes.font(fontFamily)
        this.set_default_family(fontFamily)
      } else {
        setFontFamily(fileName, this.get_default_fontfamily)
      }
    },
    showMenu() {
      this.set_font_family_visible(false)
      this.set_setting_visible(-1)
      this.set_menu_visible(!this.get_menu_visible)
    },
    hideMenu() {
      this.set_font_family_visible(false)
      this.set_setting_visible(-1)
      this.set_menu_visible(false)
    },
    prev() {
      this.hideMenu()
      this.rendition.prev()
    },
    next() {
      this.hideMenu()
      this.rendition.next()
    }
  },
  mounted() {
    let fileName = this.$route.params.fileName.split('|').join('/')
    this.set_fileName(fileName).then(() => {
      this._initEpub(fileName)
    })
  }
}
</script>

<style lang="stylus">
@import '~styles/global'
</style>
